Skip to content

[Frontend] Robust Error Boundary Wrapper#316

Open
armorbreak001 wants to merge 1 commit intoGalactiGuild:mainfrom
armorbreak001:bounty/272-error-boundary
Open

[Frontend] Robust Error Boundary Wrapper#316
armorbreak001 wants to merge 1 commit intoGalactiGuild:mainfrom
armorbreak001:bounty/272-error-boundary

Conversation

@armorbreak001
Copy link
Copy Markdown

Fixes #272

What was done

  • Created src/components/ui/ErrorBoundary.tsx — a React class component Error Boundary
  • Implemented getDerivedStateFromError and componentDidCatch lifecycle methods
  • Added onError callback prop for external analytics error reporting (falls back to console.error)
  • Fallback UI displays "Something went wrong" with a "Try Again" button that resets error state
  • Development mode shows expandable error details (stack trace)
  • Created ErrorBoundary.demo.tsx with a crash-test dummy component that throws on button click

How to verify

  1. Open frontend/src/components/ui/ErrorBoundary.demo.tsx in your browser
  2. Click the "💥 Trigger Error" button — the ErrorBoundary catches it and shows the fallback UI
  3. Click "Try Again" to reset and render the normal content again
  4. Check console for the onError callback output
  5. In dev mode, expand "Error Details (Dev)" to see the full stack trace

- Create ErrorBoundary in components/ui with dark theme styling
- Implements getDerivedStateFromError and componentDidCatch
- Fallback UI: Something went wrong + Try Again / Go Home buttons
- onError callback prop for external analytics reporting
- Development mode: expandable error details (stack trace)
- Uses Tailwind classes matching app glassmorphism dark theme
- Accessible: role=alert, proper button labels
@armorbreak001 armorbreak001 force-pushed the bounty/272-error-boundary branch 2 times, most recently from 42cfcd3 to 43c4998 Compare April 14, 2026 13:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Robust Error Boundary Wrapper

1 participant